<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html; UTF_8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>班级管理</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
    <script src="${pageContext.request.contextPath}/back/statics/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4">
            <h1 class="text-center">班级管理</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table table-bordered table-striped table-hover">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>所属标签</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${requestScope.clazzs}" var="clazz">
                    <tr>
                        <td>${clazz.id}</td>
                        <td>${clazz.name}</td>
                        <td>${clazz.tag.name}</td>
                        <td>
                            <a href="" class="btn btn-info btn-sm">修改</a>
                            <a href="" class="btn btn-danger btn-sm">删除</a>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <form id="inputForm" class="form-inline" action="${pageContext.request.contextPath}/clazz/save" method="post">
                <div class="form-group">
                    <label for="name">名称：</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="输入名称">
                </div>
                <div class="form-group">
                    <label for="tagid" >选择对应标签：</label>
                    <select name="tagid" id="tagid" style="width: 190px;" class="form-control">

                    </select>
                </div>
                <button type="submit" class="btn btn-success">添加班级</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        // 页面加载完成之后查询所有班级类型的标签信息
        // 发送get请求，传参只要班级类型，所以用这种形式{type:"班级"}，响应结果以回调函数的形式res传递过来
        // 这个操作$.get("$ {pageContext.request.contextPath}/tag/findByType",{type:"班级"}
        // 相当于发送这个地址：student_system/tag/findByType?type=班级
        $.get("${pageContext.request.contextPath}/tag/findByType",{type:"班级"},function (res) {
            console.log(res);
            // 遍历班级标签的集合
            // res是我们的回调数据，对res进行遍历，每次遍历会触发一次回调函数，
            // 回调函数的第一个参数i代表我们当前遍历的索引，第二个tag代表我们当前
            // 遍历到的对象，每遍历出来一个对象代表一个option标签
            $.each(res,function(i,tag){
                // 构建option标签
                // text(tag.name)设置文本内容
                // val(tag.id)给option添加value值，value为标签的id
                // text(tag.name).val(tag.id)使用这种方式让option既有标签名称又有标签id
                let option = $("<option/>").text(tag.name).val(tag.id);
                // 追加option
                $("#tagid").append(option);
            });
        });

        // 添加时班级的非空验证
        $("#inputForm").submit(function () {
            if (!$("#name").val()) {
                alert("请输入班级名称！");
                return false;
            }
            return true;
        });
    })
</script>
</html>